﻿<section class="section" id="tooltips">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#tooltips">Tooltips</a>
        </h1>
    </header>

    <div class="row">
        <div class="col-xs-24" style="margin-bottom: 1em;">
            <p>
                This is <a href="javascript:void(0)" data-toggle="tooltip" title="Tooltip content">a simple tooltip</a> on top (default).
                On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="left" title="Tooltip content">left</a>.
                On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="bottom" title="Tooltip content">bottom</a>.
                On the <a href="javascript:void(0)" data-toggle="tooltip" data-placement="right" title="Tooltip content">right</a>.
            </p>
        </div>

        <div class="col-xs-24" style="margin-bottom: 2em;">
            <p>You can also place them on buttons.</p>
            <button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip content">Tooltip left</button>
            <button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip content">Tooltip top</button>
            <button class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="Tooltip content">Tooltip bottom</button>
            <button class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip content">Tooltip right</button>
        </div>

        <div class="col-xs-24" style="margin-bottom: 2em;">
            <p>Tooltips are also available in alt color.</p>
            <button class="btn btn-primary theme-alt" data-toggle="tooltip" data-placement="right" title="Tooltip content">Tooltip in alt color</button>
        </div>

        <div class="col-md-24" style="margin-bottom: 1em">
            <p>To enable the tooltip on the HTML:</p>

            {{#markdown}}
```xml
<span data-toggle="tooltip" title="Tooltip content">
    Has a tooltip
</span>
```
            {{/markdown}}
        </div>
        <div class="col-md-24">
        <div class="guidance guidance-usage m-t-xs">
            {{#markdown}}
{{> tooltip-guidance.md}}
            {{/markdown}}
        </div>
    </div>

        <div class="col-md-24">
            <p>And the required JavaScript initialization:</p>

            {{#markdown}}
```javascript
$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'
    });
});
```
            {{/markdown}}
        </div>
    </div>
</section>
